<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
<link href="../static/js/plugins/layer/layui-v2.4.5/layui/css/layui.css" th:href="@{/js/plugins/layer/layui-v2.4.5/layui/css/layui.css}" rel="stylesheet"/>

<body class="gray-bg">
<div class="container-div ui-layout-center">
    <div class="row">
        <table style="margin-top:5px;">
            <tr>
                <td style="padding-left:2px;text-align: right;">节目：</td>
                <td style="padding-left:2px;">
                    <input  name="" id="orgs"  value="" type="text" readonly style="width:328px;height: 30px;border-radius:5%" /></td>

            </tr>
        </table>

        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            节目名称：<input type="text" name="fname" style="width: 130px;"/>
                        </li>

                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="ibox-content">
            <div class="ibox-content">
                <audio class="recPlay" style="width:100%"></audio>
            </div>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>

<script th:inline="javascript">
    var fids;
    var flenths;
    var fnames;
    var filenames;
    var temp = 0;
    /**
     * 选择文件
     * @param fid
     */
    function selectFiles(fname,fid,filename,value) {

        $("#orgs").attr("value",fname);
        $("#orgs").attr("name",value);
        console.log(value);
    }
    var prefix = ctx + "broad/live";
    $(function() {
        var options = {
            url: prefix + "/listfile",
            modalName: "文件选择",
            search: false,
            showExport: true,

            columns: [
                // {
                //     checkbox: true,
                // },
                {
                    field : 'fid',
                    title : '文件id',
                    visible: false
                },
                {
                    field : 'fname',
                    title : '节目名称',
                    sortable: true,
                    width: '20%',
                    formatter:function (value,row,index) {
                        var results = value;
                        if(results.toString().length>20){
                            results = results.toString().substring(0,12)+"...";
                        }
                        var actions = [];
                        actions.push('<a href="#" onclick="details(\''+ value+'\')">'+results+'</a> ');
                        return actions.join('');
                    }
                },
                {
                    field : 'filename',
                    title : '文件名称',
                    sortable: true
                },
                {
                    field : 'flenth',
                    title : '文件时长',
                    sortable: true
                },
                {
                    field : 'ispublic',
                    title : '是否公共',
                    formatter:function(value,row,index){
                        var html = "";
                        if(value == "0"){
                            html += "<label style='color: #ff5909'>非公共</label>";
                            return html;
                        }else {
                            html += "<label style='color: #02cd0d'>公共</label>";
                            return html;
                        }
                    },
                    sortable: true,
                },
                {
                    field : 'createdtime',
                    title : '创建时间',
                    sortable: true
                },
                {
                    field: 'urls',
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" href="#" onclick="lens(\''+value+'\')"><i class="fa fa-edit"></i>试听</a> ');
                        actions.push('<a class="btn btn-success btn-xs" href="#" onclick="selectFiles(\''+ row.fname+'\',\''+ row.fid+'\',\''+row.filename+'\',\''+value+'\');"><i class="fa fa-edit"></i>选择</a> ');
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
    });

    function lens(value) {
        value = "../"+value;
        value = "../"+value;
        var audio=$(".recPlay")[0];
        audio.controls=true;
        if(!(audio.ended || audio.paused)){
            audio.pause();
        };
        audio.src=value;
        audio.play();
        // var _url = "/broad/proSinmanage/getAudio?url="+url;
        // var _title = '试听';
        // var _width = "500";
        // var _height = ($(window).height() - 250);
        // layer.open({
        //     type: 2,
        //     maxmin: true,
        //     shade: 0.3,
        //     title: _title,
        //     fix: false,
        //     area: [_width + 'px', _height + 'px'],
        //     content: _url,
        //     shadeClose: true,
        //     btn: ['<i class="fa fa-check"></i> 确认', '<i class="fa fa-close"></i> 关闭'],
        //     yes: function (index, layero) {
        //         layer.close(index);
        //     }, cancel: function () {
        //         return true;
        //     }
        // });
    }

    //提供给父页面获取选中的值
    function callbackfile() {
        /*在选择终端前先获取一次文本框的值，为的是可以选择多个小组的终端*/
        var fname = document.getElementById("orgs").value;
        var fid = $("#orgs").attr("name");

        var time = $("#broaddate").val();
        datas = {  //调用它的父页面A的input这个function
            data_filename:fname,
            data_file:fid
        }
        return datas;
    }
</script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/jquery.tips.js}"></script>
<script th:src="@{/js/plugins/layer/layui-v2.4.5/layui/layui.js}"></script>

<!--时间插件-->
<script>
    function details(value) {
        var txt = value;
        alert(txt);

    }
</script>
<div th:include="include :: footer"></div>
</body>
</html>